﻿<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>首页</title>
    <script src="~/js/frame.js"></script>
</head>
<body>
    <div class="indexcontainter">
        <div class="indexhead">
            <img src="../../images/logo.png" style="width: 40px; height: 40px;">
            <span class="systemname">@ViewData["SystemName"]</span>
            <div class="righthead">
                <div class="firstmenu head_menu" id="TopMenu">
                </div>
                <div class="headop">
                    <div class="headopitem" onclick="WatchUserInfo()">
                        <img onerror="this.src='../../images/person.png'" class="userheadimg" id="HeadImg" />
                        <a href="#" style="font-size:13px">@ViewData["DisplayName"]</a>
                    </div>
                    <div class="headopitem" onclick="SetTheme()">
                        <img src="../../images/icon_theme.png" style="width:25px;height:25px" />
                        <a href="#" style="font-size:13px">主题</a>
                    </div>
                    <div class="headopitem" onclick="ChangeUserJob()" style="display:none" id="UserJobChangeContent">
                        <img src="../../images/icon_switch.png" style="width:30px;height:30px" />
                        <a href="#" style="font-size:13px">兼职切换</a>
                    </div>
                    <div class="headopitem" onclick="LoginOut()">
                        <img src="../../images/icon_loginout.png" style="width:20px;height:20px" />
                        <a href="#" style="font-size:13px">退出</a>
                    </div>

                </div>
            </div>
        </div>
        <div class="indexcontent">
            <div class="indexcontent_left" style="display:none" id="LeftMenu">
                <nav class="menu" data-ride="menu" style="width: 160px">
                    <ul id="indexTreeMenu" class="tree tree-menu" style="margin:0">
                    </ul>
                </nav>
            </div>
            <div class="indexcontent_right">
                <div class="tabtitlecontainer">
                    <div class="tabmain" id="tabmain"></div>
                    <div class="tabop">
                        <span style="cursor: pointer;" class="icon icon-times" title="关闭所有"></span>
                    </div>
                </div>
                <div class="tabcontentcontainer">
                    <div class="tabcontentcontainer" id="iframecontainer">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        loadcss(getRootPath() + "theme/" + GetSystemTheme() + "/home.css", true)
    </script>
    <script>
        var NowLeftMenuCode = "";
        var MenuTreeData = [];
        var MenuListData = [];
        var MenuTabList = [];
        var MenuUrl = GetRootPath() + "frame/org/module/getMenuRightTree";
        var SettingUrl = GetRootPath() + "frame/base/setting/getHomePageConfig";
        var LoginOutUrl = GetRootPath() + "frame/home/userlogout";
        var AttachUrl = GetRootPath() + "frame/base/attach/readfile?AttachGuid=" + '@ViewData["UserGuid"]';
        var StaticFileUrl = GetRootPath() + "frame/home/getStaticFileVersion";
        $(function () {
            RefreshStaticFileVersion();
            InitHomeMainPage();
            InitPageHeightSetting();
            InitTopMenu();
            $("#HeadImg").attr("src", AttachUrl);
            if ('@ViewData["ExistUserJob"]'=='True') {
                $("#UserJobChangeContent").show();
            }
        })


        function InitHomeMainPage() {
            CloudPost({}, SettingUrl, function (res) {
                var HomeUrl = res.data.HomeUrl;
                var FrameHeight = (document.body.clientHeight - 50 - 40) + 'px';
                var menuid = "mainpage";
                var menu = { "menuid": menuid, "name": "主页", "url": GetRootPath() + HomeUrl }
                //判断TabMenList是已经包含此窗口
                if (MenuTabList.indexOf(menuid) < 0) {
                    //增加tab
                    var TabHtml = "";
                    TabHtml += "<div id='tab_" + menuid + "' class='tabtitle tabactive'>";
                    TabHtml += "<span>" + (menu.name.length > 4 ? menu.name.substr(0, 4) + "..." : menu.name) + "</span>";
                    TabHtml += "<i id='refresh_" + menuid + "' class='tabrefresh icon icon-refresh'></i>";
                    TabHtml += "</div>";
                    $("#tabmain").append(TabHtml);
                    //增加iframe
                    var TabIFrameHtml = "<iframe class='tabiframe' id='frame_" + menuid + "' style='width:100%;border-width:0;vertical-align: bottom;height:" + FrameHeight + "' src='" + menu.url + "'></iframe>";
                    $("#iframecontainer").append(TabIFrameHtml);
                    MenuTabList.push(menuid);
                    MenuListData.push(menu);
                }
                InitTabClick();
                ChangeTab(menuid);
            });
        }

        function InitPageHeightSetting() {
            $("#indexTreeMenu").height(document.body.clientHeight - 50);
        }

        function InitTopMenu() {
            CloudPost({ "MenuType": "Top" }, MenuUrl, function (res) {
                var TopMenuList = res.data;
                var MenuHtml = "";
                for (var i = 0; i < TopMenuList.length; i++) {
                    var MenuItem = TopMenuList[i];
                    MenuHtml += "<div class='head_menuitem' onclick=InitLeftMenu('" + MenuItem.extra.ModuleCode + "')><span>";
                    MenuHtml += MenuItem.name;
                    MenuHtml += "</span></div>";

                }
                $("#TopMenu").html(MenuHtml);
            })
        }

        function InitLeftMenu(MenuCode) {

            if ($("#LeftMenu").css("display") != "none") {
                 //左侧菜单显示
                if (NowLeftMenuCode == MenuCode) {
                    //同一菜单
                    $("#LeftMenu").hide();
                    return;
                } else {
                    //不同菜单
                    RenderLeftMenu(MenuCode);
                }
            } else {
                //左侧菜单不显示
                if (NowLeftMenuCode == MenuCode) {
                    //同一菜单
                    $("#LeftMenu").show();
                    return;
                } else {
                    //不同菜单
                    RenderLeftMenu(MenuCode);
                }
            }
        }

        function RenderLeftMenu(MenuCode) {
            NowLeftMenuCode = MenuCode
            CloudPost({ "MenuType": "Left", "ModuleCode": MenuCode }, MenuUrl, function (res) {
                MenuTreeData = res.data;
                var MenuHtml = "";
                for (var i = 0; i < MenuTreeData.length; i++) {
                    var MenuItem = MenuTreeData[i];
                    if (i == 0) {
                        MenuHtml += "<li class='active'>";
                    } else {
                        MenuHtml += "<li>";
                    }

                    var MenuItemClass = "SubMenu";
                    if (MenuItem.isParent == false && MenuItem.extra.ModuleUrl != "") {
                        MenuItemClass = "MenuItem"
                    }
                    var MenuItemHtml = "<a class='" + MenuItemClass + "' menuid='" + MenuItem.id + "'>" + (MenuItem.extra.ModuleIcon != "" ? "<i class='icon " + MenuItem.extra.ModuleIcon + "'></i>" : "") + MenuItem.name + "</a>";
                    if (MenuItem.isParent) {
                        MenuItemHtml += RenderSubMenu(MenuItem.children);
                    } else {
                        MenuListData.push({ "menuid": MenuItem.id, "url": GetRootPath() + MenuItem.extra.ModuleUrl, "name": MenuItem.name });
                    }
                    MenuHtml += MenuItemHtml;
                    MenuHtml += "</li>";

                }
                $("#indexTreeMenu").html("");
                $("#indexTreeMenu").html(MenuHtml);
                $("#LeftMenu").show();
                //重置
                $('#indexTreeMenu').data('zui.tree', null)
                //渲染
                $('#indexTreeMenu').tree();
                //点击同步
                $(".SubMenu").click(function () {
                    var parent = $(this).parent()[0];
                    if (parent.className.indexOf('open') != -1) {
                        $(parent).removeClass('open');
                    } else {
                        $(parent).addClass('open');
                    }
                })
                //点击高亮
                $('#indexTreeMenu').on('click', 'a', function () {
                    $('#indexTreeMenu li.active').removeClass('active');
                    $(this).closest('li').addClass('active');
                });
                //点击菜单右侧增加tab
                var FrameHeight = (document.body.clientHeight - 50 - 40) + 'px';
                $(".MenuItem").click(function () {
                    var menuid = $(this).attr("menuid");
                    var menu = GetMenuData(menuid);
                    if (menu.MenuUrl == '') {
                        OpenAlert('提示', '该菜单未配置模块地址！')
                    }
                    //判断TabMenList是已经包含此窗口
                    if (MenuTabList.indexOf(menuid) < 0) {
                        var MenuUrl = menu.url;
                        //增加tab
                        var TabHtml = "";
                        TabHtml += "<div id='tab_" + menuid + "' class='tabtitle tabactive'>";
                        TabHtml += "<span>" + (menu.name.length > 4 ? menu.name.substr(0, 4) + "..." : menu.name) + "</span>";
                        TabHtml += "<i id='refresh_" + menuid + "' class='tabrefresh icon icon-refresh'></i>";
                        TabHtml += "<i id='delete_" + menuid + "' class='tabdelete icon icon-times'></i>";
                        TabHtml += "</div>";
                        $("#tabmain").append(TabHtml);
                        //增加iframe
                        var TabIFrameHtml = "<iframe class='tabiframe' id='frame_" + menuid + "' style='width:100%;border-width:0;vertical-align: bottom;height:" + FrameHeight + "' src='" + MenuUrl + "'></iframe>";
                        $("#iframecontainer").append(TabIFrameHtml);
                        MenuTabList.push(menuid);
                        //增加tab后滚动（防止超过屏幕tab栏长度后不显示）
                        var tabobj = $("#tabmain");
                        tabobj.scrollLeft(1000)
                    }
                    InitTabClick();
                    ChangeTab(menuid);
                })
            })
        }

        function InitTabClick() {
            //tab 点击事件
            $(".tabtitle").unbind("click").click(function () {
                var menuid = $(this).attr("id").split("_")[1];
                ChangeTab(menuid);
            })
            //删除事件
            $(".tabdelete").unbind("click").click(function () {
                var menuid = $(this).attr("id").split("_")[1];
                var tabclassname = $("#tab_" + menuid).attr('class');
                //删除tab
                $("#tab_" + menuid).remove();
                //删除iframe
                $("#frame_" + menuid).remove();
                //维护MenuTabList
                var activemenuid = "";
                for (var i = 0; i < MenuTabList.length; i++) {
                    if (MenuTabList[i] == menuid) {
                        //如果删除的tab是active的，则不做切换
                        if (tabclassname.indexOf("tabactive") >= 0) {
                            if (i == MenuTabList.length - 1 && i != 0) {
                                //如果删除的是最后一个tab,默认切换到前一个
                                activemenuid = MenuTabList[i - 1];
                            } else {
                                //切换到后一个
                                activemenuid = MenuTabList[i + 1];
                            }
                            ChangeTab(activemenuid)
                        }
                        MenuTabList.splice(i, 1);
                    }
                }
            })
            //刷新事件
            $(".tabrefresh").unbind("click").click(function () {
                var menuid = $(this).attr("id").split("_")[1];
                var menu = GetMenuData(menuid);
                $("#frame_" + menuid).attr("src", menu.url);
            })
            //tab栏滚动事件
            $(".tabmain").each(function (index, element) {
                element.onwheel = function (event) {
                    var table = $("#tabmain");
                    var right = table[0].scrollWidth - $(element).width();
                    //table[0].scrollWidth为div包含滚动部分的全部宽度，$(element).width()为div的宽度，计算可得知滚动部分长度
                    //table.scrollLeft()为div已经滚动了多少，相比较就可以判断div是否滚动完毕
                    if (table.scrollLeft() < right && event.deltaY > 0) {
                        //禁止事件默认行为（此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为）
                        event.preventDefault();
                        var left = (table.scrollLeft() + 100);
                        table.scrollLeft(left)
                    }
                    if (table.scrollLeft() > 0 && event.deltaY < 0) {
                        //禁止事件默认行为（此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为）
                        event.preventDefault();
                        var left = (table.scrollLeft() - 100);
                        table.scrollLeft(left)
                    }
                }
            })
        }

        function ChangeTab(menuid) {
            $(".tabtitle").each(function () {
                var id = $(this).attr("id");
                if (id != "tab_" + menuid) {
                    $(this).removeClass("tabactive");
                } else {
                    $(this).addClass("tabactive");
                }
            })
            $(".tabiframe").each(function () {
                var id = $(this).attr("id");
                if (id != "frame_" + menuid) {
                    $(this).hide();
                } else {
                    $(this).show();
                }
            })
        }

        function RenderSubMenu(SubMenuTreeData) {
            var MenuHtml = "<ul>";
            for (var i = 0; i < SubMenuTreeData.length; i++) {
                MenuHtml += "<li>";
                var MenuItem = SubMenuTreeData[i];
                var MenuItemClass = "SubMenu";
                if (MenuItem.isParent == false && MenuItem.extra.ModuleUrl != "") {
                    MenuItemClass = "MenuItem"
                }
                var MenuItemHtml = "<a class='" + MenuItemClass + "' menuid='" + MenuItem.id + "'>" + (MenuItem.extra.ModuleIcon != "" ? "<i class='icon " + MenuItem.extra.ModuleIcon + "'></i>" : "") + MenuItem.name + "</a>";
                if (MenuItem.isParent) {
                    MenuItemHtml += RenderSubMenu(MenuItem.children);
                } else {
                    MenuListData.push({ "menuid": MenuItem.id, "url": GetRootPath() + MenuItem.extra.ModuleUrl, "name": MenuItem.name });
                }
                MenuHtml += MenuItemHtml;
                MenuHtml += "</li>";
            }
            MenuHtml += "</ul>"
            return MenuHtml;
        }

        function GetMenuData(menuid) {
            var MenuData = {};
            for (var i = 0; i < MenuListData.length; i++) {
                var item = MenuListData[i];
                if (item.menuid == menuid) {
                    MenuData = item;
                    break;
                }
            }
            return MenuData;
        }

        function LoginOut() {
            OpenConfirm('确认退出系统?', function () {
                CloudPost({}, LoginOutUrl, function (res) {
                    if (res.code == 0) {
                        window.top.location.reload();
                    }
                });
            })
        }

        function WatchUserInfo() {
            OpenTopDialog("用户信息", "frame/org/user/modify?userguid=" + '@ViewData["UserGuid"]', 600, 1000)
        }

        function ChangeUserJob() {
            OpenTopDialog('兼职选择', '@ViewData["ChangeUserJobUrl"]' + "?userguid=" + '@ViewData["RealUserGuid"]', 300, 600, function (ReturnValue) {
                if (ReturnValue == "OK") {
                    window.top.location.reload();
                }
            })
        }

        function SetTheme() {
               OpenTopDialog('主题设置', "frame/extend/theme/setting", 200, 400, function (ReturnValue) {
                if (ReturnValue == "OK") {
                    window.top.location.reload();
                }
            })
        }

        function RefreshStaticFileVersion() {
            CloudPost({}, StaticFileUrl, function (res) {
                if (res.code == 0) {
                    SetLocalData("StaticFileVersion", res.data);
                }
            });
        }
    </script>
</body>
</html>
